<template>
	<!-- 新增/编辑订单地址 -->
	<view class="form_box">
		<uni-forms ref="form" :modelValue="formData" label-width="100px" label-position="left" label-align="right"
			:rules="rules">
			<uni-forms-item label="收货人姓名" required name="name">
				<uni-easyinput v-model="formData.name" placeholder="请输入收货人姓名"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="收货地址" required name="address">
				<view class="iconsAddress" @click="toHide('bottom')">
					<text style="margin-left: 20rpx;">{{formData.province}} </text>
					<text> {{formData.city}}</text>
					<text>{{formData.region}}</text>
					<uni-icons type="down" style="	margin-right: 20rpx;"></uni-icons>
				</view>
			</uni-forms-item>
			<uni-forms-item label="详细地址" required name="streetAddress">
				<uni-easyinput v-model="formData.streetAddress" placeholder="请输入详细地址"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="邮政编码" >
				<uni-easyinput v-model="formData.code" placeholder="请输入邮政编码"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="手机号码" required name="phone">
				<uni-easyinput v-model="formData.phone" placeholder="请输入手机号码"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="默认收货地址" name="status">
				<view class="switchStyle">
					<view>每次下单时使用该地址</view>
					<label style="margin: 0 0 0 20rpx;">
						<switch @click="isChecked" :checked="formData.status" />
					</label>
				</view>
			</uni-forms-item>
		</uni-forms>
		<view style="width: 100%;">
			<uni-popup ref="popup" type="bottom" style="width: 100%;" background-color="#fff">
				<view class="popup_bottom">
					<view class="popupCancel" @click="onCancel">取消</view>
					<view class="popupYes" @click="handleConfirmed">确定</view>
				</view>
				<view class="popupBox">
					<view class="popup-content">
						<text @click="clickProvence(item)" :key="index"
							:class="{ 'selectedPop': provinceCode === item.code }"
							v-for=" (item,index) in provinces">{{item.name}}</text>
					</view>
					<view class="popup-content">
						<text @click="clickCity(item)" :key="index" :class="{ 'selectedPop': cityCode === item.code }"
							v-for=" (item,index) in cities"> {{item.name}}</text>
					</view>
					<view class="popup-content">
						<text @click="clickDistries(item)" :key="index"
							:class="{ 'selectedPop': regionCode === item.code }" v-for=" (item,index) in districts">
							{{item.name}}</text>
					</view>
				</view>
			</uni-popup>
		</view>
		<button type="primary" @click="register">保存收货地址</button>
	</view>
</template>

<script>
	import {
		mapMutations
	} from "vuex"
	import request from '../../utils/request'
	export default {

		data() {
			return {
				province: "",
				city: "",
				region: "",
				cityCode: '',
				provinceCode: "",
				regionCode: '',
				selectedProvinces: "",
				selectedCity: "",
				selectedDistries: "",
				provinces: [],
				cities: [],
				districts: [],
				formData: {
					name: '',
					phone: '',
					code: '',
					status: false
				},
				rules: {
					phone: {
						rules: [{
								required: true,
								errorMessage: "请输入手机号"
							},
							{
								validateFunction: function(rule, value, data, callback) {
									let reg = /^1[3456789]\d{9}$/;
									if (!reg.test(value)) {
										callback("输入有效的手机号");
									}
								}
							}
						]
					},
				},
			}
		},
		onLoad(options) {
			if (options.id) {
				this.getAddressDetails(options.id)
			}
		},
		methods: {
			onCancel() {
				this.$refs.popup.close()
			},
			handleConfirmed() {  
				this.onCancel()  
			},
			// 获取到省份 一级
			getCityList() {
				request.get('/common/city/query').then(res => {
					if (res.code === 0) {
						this.provinces = res.data
						this.clickProvence(res.data[0])
					} else {
						uni.$showMsg(res.msg)
					}
				})
			},
			clickProvence(item) {
				this.formData.provinceCode = item.code;
				this.provinceCode = item.code; // 更新选中的索引
				request.get(`/common/city/query/${item.code}`).then(res => {
					if (res.code === 0) {
						this.cities = res.data
						this.clickCity(res.data[0])
					} else {
						uni.$showMsg(res.msg)
					}
				})
				this.formData.province = item.name;
			},
			clickCity(item) {
				this.formData.cityCode = item.code;
				this.cityCode = item.code; // 更新选中的索引
				request.get(`/common/city/query/${item.code}`).then(res => {
					if (res.code === 0) {
						this.districts = res.data
						this.clickDistries(res.data[0])
					} else {
						uni.$showMsg(res.msg)
					}
				})
				this.formData.city = item.name;
			},
			clickDistries(item) {
				this.formData.regionCode = item.code;
				this.formData.region = item.name;
				this.regionCode = item.code; // 更新选中的索引
			},

			toHide(type) {
				this.type = type
				this.$refs.popup.open()
				this.getCityList()
			},
			...mapMutations('m_order', ['saveAddressList']),
			getAddressDetails(id) {
				request.get(`/memberAddress/info/${id}`, this.formData).then(res => {
					if (res.code === 0) {
						this.saveAddressList(res.data)
						this.formData = res.data
					} else {
						uni.$showMsg(res.msg)
					}
				})
			},
			isChecked(e) {
				this.formData.status = !this.formData.status
			},
			register() {
				if (this.formData.status === false) {
					this.formData.status = 0
				} else {
					this.formData.status = 1
				}
				this.$refs.form.validate().then(() => {
						request.post('/memberAddress/save', this.formData).then(res => {
							if (res.code === 0) {
								uni.$showMsg(res.msg)
								uni.navigateBack(-1)
							} else {
								uni.$showMsg(res.msg)
							}
						})
					})
					.catch((err) => {
						console.log('表单校验失败：', err)
					})
			},

		}
	}
</script>

<style lang="scss">
	.form_box {
		font-size: 30rpx;

		.iconsAddress {
			width: 100%;
			background-color: #fff;
			height:65rpx;
			border-radius: 4px;
			border: 1rpx solid #eee;
			display: flex;
			justify-content: space-between;
			align-items: center;

		}

		.popup_bottom {
			display: flex;
			justify-content: space-between;
			margin: 10rpx;

			.popupYes {
				background-color: #007aff;
				color: white;
				padding: 10rpx;
				text-align: center;
				height: 30rpx;
				line-height: 30rpx;
				width: 60rpx;
			}

			.popupCancel {
				padding: 10rpx;
				background-color: #007aff;
				color: white;
				text-align: center;
				height: 30rpx;
				line-height: 30rpx;
				width: 60rpx;
			}
		}

		.popupBox {
			display: flex;
			justify-content: space-around;
			height: 200rpx;

			.popup-content {
				display: flex;
				flex-direction: column;
				/* 限制高度，这里以一个示例高度为例，根据实际情况调整 */
				max-height: 300px;
				/* 启用滚动条，如果内容溢出 */
				overflow-y: auto;
				/* 可选：美化滚动条样式，这取决于你的设计需求和浏览器支持情况 */
				scrollbar-width: thin;
				/* Firefox */
				scrollbar-color: rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.9);

				.selectedPop {
					color: royalblue;
				}
			}
		}

		padding: 10rpx 20rpx;

		.selection {
			display: flex;
		}

		.province_box {
			display: flex;
		}

		.switchStyle {
			display: flex;
			// justify-content: space-around;
			align-items: center;
			// background-color: blue;
		}





		// .popup-content {
		// 	// @include flex;
		// 	align-items: center;
		// 	justify-content: center;
		// 	padding: 15px;
		// 	height: 50px;
		// 	background-color: #fff;
		// }

		// .popup-height {
		// 	// @include height;
		// 	width: 200px;
		// }
	}
</style>